<template>
  <el-dialog title='云柜员对应技能组修改' :visible.sync='isShow' width='700px'  :lock-scroll=false
              :close-on-click-modal=false @close='clearForm("queryForm")'  @open="initializtaion"
             >
    <div  v-loading="loading">
      <div  class="detailInfo" >
          <el-card class='type-info-box-card'>
            <el-row>
              <el-col :lg='24'>
                    <el-form ref='queryForm' size='mini' :model="queryForm" label-width="140px" :rules="rules" label-position="center">
                            
                      <el-row :gutter="50">
                          <el-col :span='100' >
                              <el-form-item label='柜员名称' prop='AGENTID' >
                                    <el-select v-model='queryForm.AGENTID' filterable  style="width:350px" disabled>
                                        <el-option v-for='item in AGENTIDS' :key='item.AGENTNAME' :label='item.AGENTNAME' :value='item.AGENTID'>
                                        </el-option>
                                    </el-select>
                              </el-form-item>
                          </el-col>
                      </el-row>
                      
                      <el-row :gutter="0">
                          <!-- <el-col :span='400' >
                            <el-form-item label='技能组类型' prop='handleSelectValue' >
                              <div style="height:40px">
                              </div>
                                <el-transfer  v-model="queryForm.handleSelectValue" :props="{key:'value',label:'desc'}" :data="BUSITYPEPOOL" :titles="['技能组列表','已选技能组']" filter-placeholder="请选择技能组"  style="width:550px;margin-left: -70px; padding-bottom:10px" >
                                </el-transfer>
                            </el-form-item>
                          </el-col> -->
                           <el-col :span='100'>
                              <el-form-item label='技能组' prop='BUSITYPE' >
                                    <el-select v-model='queryForm.BUSITYPE' filterable style="width:350px">
                                        <el-option v-for='item in querySkills' :key='item.BUSITYPE' :label='item.BUSITYPENAME' :value='item.BUSITYPE'>
                                        </el-option>
                                    </el-select>
                              </el-form-item>
                          </el-col>
                      </el-row>
                       <!-- <el-row :gutter="50">
                          <el-col :span='100' >
                              <el-form-item label='工作日可用' prop='WORKDAY'>
                                    <el-select v-model='queryForm.WORKDAY' style="width:350px" >
                                        <el-option v-for='item in tellerWorkdayOpions' :key='item.value' :label='item.label' :value='item.value'>
                                        </el-option>
                                    </el-select>
                              </el-form-item>
                          </el-col>
                        </el-row> 
                        
                        <el-row :gutter="350">
                          <el-col :span='100' >
                              <el-form-item label='节假日可用' prop='HOLIDAY'>
                                    <el-select v-model='queryForm.HOLIDAY' style="width:350px" >
                                        <el-option v-for='item in tellerHolidayOpions' :key='item.value' :label='item.label' :value='item.value'>
                                        </el-option>
                                    </el-select>
                              </el-form-item>
                          </el-col>
                        </el-row>  -->
                      
                </el-form>
              </el-col>
            </el-row>
          </el-card>
      </div>
      <div slot="footer"  style="margin:10px 0;text-align:center">
            <el-button size="mini"  @click="isShow=false">取消</el-button>
            <el-button type='primary' size='mini'  @click="submit">确定</el-button>
      </div>
    </div>
   </el-dialog>
</template>

<script>
import DateUtils from '@/CTManage/utils/DateUtils';
import request from "@/common/utils/requestCT";
import cloudTellerAdd from  "@/message/CTManage/teller/cloud-teller-add";
import selectTree from "@/components/selectTree2/";
import getGlobalParams from '@/common/utils/getGlobalParams';
import spinnerList from "@/message/spinnerDataQuery/spinner-data-query";
import TellerSkillQuery from "@/message/CTManage/skill/teller-skill-query";
import cloudTellerQuery from "@/message/CTManage/teller/cloud-teller-query";
import tellerMatchSkillUpdate from "@/message/CTManage/teller-match-skill/teller-match-skill-Update";


export default {
  components: { selectTree },
  data() {
    return {
      loading: false,
      brno: [],
      querySkills:[],
      BUSITYPEPOOL:[],
      oldBUSITYPE:'',
      queryForm: {  //表单数据
        BRANCHNO:[],
        AGENTID: '',
        BUSITYPE:'',
        handleSelectValue:[],
        WORKDAY:'',
        HOLIDAY:''
      },
      AGENTIDS:[],
      telletstatusOpions:[
        { label: '正常', value: '1' },
        { label: '离岗', value: '2' }
      ],
      rules: {  //表单校验规则
        AGENTID: [
          { required: true, message: "请输入柜员名称", trigger: "blur" }
        ],
         WORKDAY: [
          { required: true, message: "请选择工作日是否可用", trigger: "blur" }
        ],
        HOLIDAY: [
          { required: true, message: "请选择节假日是否可用", trigger: "blur" }
        ],
        handleSelectValue:[
          { required: true, message: "请选择技能", trigger: "blur" }
        ]
      },
       tellerWorkdayOpions:[
        { label: '可用', value: '0' },
        { label: '不可用', value: '1' }
       ],
        tellerHolidayOpions:[
        { label: '可用', value: '0' },
        { label: '不可用', value: '1' }
        ]
    };
  },
  props: { option: Object ,message:Array },
  methods: {
    
    initializtaion(){
        this.queryForm.AGENTID = this.message[0].AGENTID;
        this.queryForm.BUSITYPE = this.message[0].BUSITYPE;
        // console.log("ddddd",this.message[0].AGENTID);
        
        // this.queryForm.handleSelectValue = this.message[0].BUSITYPE.split(",");
        // for(let i=0;i<this.queryForm.handleSelectValue.length;i++){
        //   this.queryForm.handleSelectValue[i] = parseInt(this.queryForm.handleSelectValue[i]);
        // }
        // console.log("handleSelectValue",this.message[0].BUSITYPE, this.queryForm.handleSelectValue )
        // this.queryForm.WORKDAY = this.message[0].WORKDAY;
        // this.queryForm.HOLIDAY = this.message[0].HOLIDAY;
        // this.oldBUSITYPE = this.message[0].BUSITYPE;
    },


generateData(){
      const data = [];
      for(let i=0;i<this.querySkills.length;i++){
        data.push({
          value:this.querySkills[i].BUSITYPE,
          desc:this.querySkills[i].BUSITYPENAME,
        })
      };
      this.BUSITYPEPOOL=data;
      // console.log(this.BUSITYPEPOOL)
    },

    async queryTeller(nodeVal, nodeObj){
      // console.log(nodeVal,nodeObj )
      let resBodyTellerQuery = new cloudTellerQuery();
      if(this.queryForm.BRANCHNO.length == 0){
        resBodyTellerQuery.data.branchNo = this.$store.state.user.branchId;
      }else{
        resBodyTellerQuery.data.branchNo = this.queryForm.BRANCHNO[0];
      }
      let responseTellerQuery = await request(resBodyTellerQuery);

      if (responseTellerQuery.SYS_HEAD.ReturnCode == "000000") {
        this.AGENTIDS = responseTellerQuery.RSP_BODY.resultSet;
      }else {
        this.$message({
            type: "error",
            message: "请求失败，错误码:" + responseTellerQuery.SYS_HEAD.ReturnCode + "，错误信息：" + responseTellerQuery.SYS_HEAD.ReturnMessage
          });
      }
    },

    submit() {
      this.$refs["queryForm"].validate(valid => {
        if (valid) {
          this.loading = true;
          let resBody = new tellerMatchSkillUpdate();
          // console.log(this.queryForm.handleSelectValue.toString())
          // console.log(this.BUSITYPEPOOL.toString())
          // resBody.data.BUSITYPE = this.queryForm.handleSelectValue.toString().replace("\"","").replace("[","").replace("]","");
          resBody.data.AGENTID = this.queryForm.AGENTID;
          resBody.data.BUSITYPE = this.queryForm.BUSITYPE
          // resBody.data.WORKDAY = this.queryForm.WORKDAY;
          // resBody.data.HOLIDAY = this.queryForm.HOLIDAY;
          resBody.data.oldBUSITYPE = this.message[0].BUSITYPE;
          request(resBody)
            .then(response => {
              if (response.SYS_HEAD.ReturnCode === "000000") {
                this.loading = false;
                this.$message({
                  type: "success",
                  message: "柜员对应技能组维护成功!"
                });
                this.isShow = false;
                this.$emit("refreshTable");
                this.message[0].BUSITYPE="";
                this.queryForm.BUSITYPE=""
              } else {
                 this.$message({
                      type: "error",
                      message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
        });
        this.loading = false;
              }
            })
            .catch(error => {
              this.loading = false;
              console.log(error);
            });
        }
      });
    },
    clearForm(item) {
      if (this.$refs.queryForm) {
        this.$refs.queryForm.resetFields();
        this.$refs.queryForm.clearValidate();
      }
    }
  },
  computed: {
    isShow: {
      get: function() {
        return this.option.isShow;
      },
      set: function(newValue) {
        this.option.isShow = newValue;
      }
    }
  },
  async created() {
    // let resBody = new spinnerList();
    //   resBody.data.spinnerList = [{
    //     spinnerName: "branch"
    //   }];
    //   let response = await request(resBody);

    //   if (response.SYS_HEAD.ReturnCode == "000000") {
    //     this.brno = response.RSP_BODY.branchSpinner;
    //   } else {
    //     this.$message({
    //       type: "error",
    //       message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
    //     });
    //   };
      
      this.queryTeller();

      let resBodySkills = new TellerSkillQuery();
      resBodySkills.QueryPageNo = this.currentPage;
      resBodySkills.QueryRowNum = this.pageSize;
      let responseSkills = await request(resBodySkills);

      if (responseSkills.SYS_HEAD.ReturnCode == "000000") {
        this.querySkills = responseSkills.RSP_BODY.resultSet;
        // console.log(this.querySkills);
        // console.log(this.querySkills.length)
        this.generateData();
        
      }else {
        this.$message({
            type: "error",
            message: "请求失败，错误码:" + responseSkills.SYS_HEAD.ReturnCode + "，错误信息：" + responseSkills.SYS_HEAD.ReturnMessage
          });
      }
  }
  // mounted() {
  //   window.addEventListener("scroll", this.handleScroll);
  // }
};
</script>

<style lang="scss" scope>
.isShow {
  display: none;
}
.returnBtn {
  width: 50px;
  height: 50px;
  background: #000;
  opacity: 0.5;
  position: fixed;
  right: 45px;
  bottom: 53px;
  border-radius: 3px;
  text-align: center;
  padding-top: 15px;
}
.returnBtn:hover {
  opacity: 0.9;
}
.modelMargin {
  margin: 5px;
  .el-card__header {
    height: 65px;
  }
}
#returnBtnTop {
  height: 50px;
  background: #409eff;
  width: 100%;
  transition: all 0.3s;
}
.editClass {
  input.el-input__inner {
    border: none;
    background: rgba(0, 0, 0, 0) !important;
  }
}
.inputWidth100 {
  width: 100%;
}
</style>
